<!-- 页头 -->
<template>
  <div class="headerWrap">
    <div class="header headerTop">
      <div class="headerBox basePageBox">
        <div class="headerLogo" @click="toRouter('/home')">
          <img src="@/assets/logo-white.png" alt="" srcset="">
        </div>
        <div class="user_box_wrap" v-if="!isLogin">
          <div class="backHome" @click="toPlatformHomepage">
            <i class="el-icon-arrow-left"></i>
            返回平台首页
          </div>
          <div class="user_box" @click="toLoginFn">
            <div class="loginBtn">登录</div>
          </div>
          <div class="user_box" @click="toLoginFn">
            <div class="registerBtn">注册</div>
          </div>
        </div>
        <!-- <div class="loginOut" @click="toPersonal" v-if="isLogin">
          <img class="userHead" src="@/assets/userHead.png" alt="" srcset="">
          <div>{{ userInfo.name }}</div>
        </div>
        <div class="loginOut" @click="toLoginOut" v-if="isLogin">
          <img src="@/assets/loginOut.png" alt="" srcset="">
          <div>退出登录</div>
        </div> -->
        <div class="user_box_wrap" v-if="isLogin">
          <div class="backHome" @click="toPlatformHomepage">
            <i class="el-icon-arrow-left"></i>
            返回平台首页
          </div>
          <el-dropdown>
            <div class="user_box">
              <div class="user_img">
                <svg t="1724422188109" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5102" width="200" height="200"><path d="M511.333 63.333c-247.424 0-448 200.576-448 448s200.576 448 448 448 448-200.576 448-448-200.576-448-448-448z m0 832c-51.868 0-102.15-10.144-149.451-30.15-36.011-15.231-69.123-35.67-98.812-60.897 12.177-31.985 42.226-63.875 84.223-88.903C396.189 686.243 456.222 669.53 512 669.53c55.631 0 115.416 16.658 164.026 45.703 41.762 24.953 71.689 56.812 83.863 88.804-29.764 25.342-62.976 45.865-99.106 61.146-47.299 20.006-97.582 30.15-149.45 30.15z m296.268-139.658c-20.493-35.937-54.353-68.855-98.747-95.381C649.75 624.979 579.839 605.53 512 605.53c-67.964 0-138.094 19.488-197.471 54.875-44.644 26.606-78.656 59.594-99.195 95.586-23.835-28.755-43.234-60.652-57.85-95.208-20.006-47.3-30.15-97.583-30.15-149.451s10.144-102.15 30.15-149.451c19.337-45.719 47.034-86.792 82.321-122.078 35.286-35.287 76.359-62.983 122.078-82.321 47.3-20.006 97.583-30.15 149.451-30.15 51.868 0 102.15 10.144 149.451 30.15 45.719 19.337 86.792 47.034 122.078 82.321 35.287 35.286 62.983 76.359 82.321 122.078 20.006 47.3 30.15 97.583 30.15 149.451s-10.144 102.15-30.15 149.451c-14.563 34.429-33.869 66.22-57.583 94.892z" fill="#ffffff" p-id="5103"></path><path d="M512 220.223c-88.224 0-160 71.776-160 160s71.776 160 160 160c88.225 0 160-71.775 160-160s-71.775-160-160-160z m0 256c-52.935 0-96-43.065-96-96s43.065-96 96-96 96 43.065 96 96-43.065 96-96 96z" fill="#ffffff" p-id="5104"></path></svg>
              </div>
              <div class="el-dropdown-link" style="color: #ffffff; font-size: 14px">
                {{ userInfo.name }}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="toRouter('/personal')">
                  <img class="dropdown-icon" src="@/assets/personal-icon.png" alt="" srcset="">
                  个人中心
                </el-dropdown-item>
                <el-dropdown-item @click.native="toLoginOut">
                  <img class="dropdown-icon" src="@/assets/login-out-icon.png" alt="" srcset="">
                  退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </div>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div class="header">
      <div class="headerBox basePageBox">
        <div class="headerNav">
          <div
            v-for="(item, index) in navList"
            :key="'nav' + index"
            class="navItem"
          >
            <div v-if="!item.child" @click="toRouter(item.url)">{{ item.name }}</div>
            <el-dropdown v-if="item.child" placement="bottom">
              <div class="navName">
                {{ item.name }}
              </div>
              <el-dropdown-menu slot="dropdown">
                <template v-for="(child, childIndex) in item.child" >
                  <el-dropdown-item :key="childIndex" v-if="!child.isNeedLogin || isLogin">
                    <div @click="toRouter(child.url, child.params)">{{ child.name }}</div>
                  </el-dropdown-item>
                </template>
              </el-dropdown-menu>
            </el-dropdown>

            <div v-if="item.selectUrl.includes(currentPath)" class="active"></div>
          </div>
        </div>
        <div class="headerRgt">
          <el-input class="headerInput" placeholder="请输入内容" v-model="searchVal">
            <el-select v-model="searchType" @change="selectSearchType" slot="prepend" placeholder="请选择">
              <el-option
                v-for="item in searchTypeList"
                :key="`stype${item.value}`"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { toLogin, platformHomepage } from '@/utils/baseConfig';
export default {
  name: 'PageHeader',
  data() {
    return {
      navList: [
        {
          name: '首页',
          url: '/home',
          selectUrl: ['/home']
        },
        {
          name: '课程',
          url: '/course',
          selectUrl: ['/course', '/courseDetails']
        },
        {
          name: '专题',
          url: '/topic',
          selectUrl: ['/topic', '/topic/detail']
        },
        {
          name: '培训',
          url: '/training',
          selectUrl: ['/training', '/trainingDetails', '/trainingVideoDetails', '/trainingStatic'],
          // child: [
          //   {
          //     name: '全部培训',
          //     url: '/training',
          //     isNeedLogin: false,
          //   },
          //   {
          //     name: '创建培训',
          //     url: '/training',
          //     params: { status: 'add' },
          //     isNeedLogin: true,
          //   },
          // ]
        },
        {
          name: '集体备课',
          url: '/teach',
          selectUrl: ['/teach', '/teachDetails', '/teachVideoDetails', '/teachStatic',],
          // child: [
          //   {
          //     name: '全部备课',
          //     url: '/teach',
          //     isNeedLogin: false,
          //   },
          //   {
          //     name: '发起备课',
          //     url: '/teach',
          //     params: { status: 'add' },
          //     isNeedLogin: true,
          //   },
          // ]
        },
        // {
        //   name: '专家',
        //   url: '/expert',
        //   selectUrl: ['/expert', '/expert/detail']
        // },
        // {
        //   name: '个人中心',
        //   url: '/personal',
        //   selectUrl: ['/personal']
        // },
      ],
      searchTypeList: [
        { label: '课程', value: '1', path: '/course' },
        { label: '专题', value: '2', path: '/topic' },
        { label: '培训', value: '3', path: '/training' },
        { label: '集体备课', value: '4', path: '/teach' },
        { label: '专家', value: '5', path: '/expert' }
      ],
      searchVal: '',
      searchType: '1',
      currentPath: this.$route.path,
      hovered: false,
    };
  },
  watch: {
    $route(to) {
      this.currentPath = to.path;
    },
  },
  computed: {
    ...mapState({
      isLogin: (state) => !!state.user.token,
      userInfo: (state) => state.user.userInfo,
    })
  },
  created() {},
  mounted() {
    const navPaths = this.searchTypeList.map(item => {
      return item.path
    })
    const curPath = this.$route.path
    if (navPaths.includes(curPath)) {
      const curSelect = this.searchTypeList.filter(v => v.path === curPath)
      this.searchType = curSelect[0].value
    }
  },
  methods: {
    search() {
      this.$store.state.app.searchType = this.searchType
      this.$store.state.app.searchKey = this.searchVal
      if (this.$route.path !== this.searchTypeList[this.searchType - 1].path) {
        this.$router.push(this.searchTypeList[this.searchType - 1].path)
      } else {
        this.$bus.$emit('emitNavPageSearch')
      }
    },
    selectSearchType(v) {
      this.$store.state.app.searchType = v
    },
    toRouter(url, params) {
      if (this.currentPath === url) {
        return;
      }
      if (!['/home', '/personal'].includes(url)) {
        const curSelect = this.searchTypeList.filter(v => v.path === url)
        this.searchType = curSelect[0].value
      }
      this.searchVal = ''
      this.$store.state.app.searchKey = ''
      this.$router.push({
        path: url,
        query: params,
      });
    },
    toLoginFn() {
      toLogin()
    },
    toLoginOut() {
      this.$store.dispatch('userLoginOutToHom');
    },
    toPlatformHomepage() {
      window.location.href = platformHomepage;
    }
  },
};
</script>

<style scoped lang="scss">
.headerWrap {
  box-shadow: 0px 2px 12px 0px #00000014;
  .header {
    width: 100%;
    min-width: $page-min-width;
    height: 80px;
    background: #fff;
  
    .headerBox {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .headerLogo {
        font-size: 22px;
        color: $primary-color;
        cursor: pointer;
        font-weight: 500;
        img {
          height: 48px;
          display: block;
        }
      }
      .headerNav {
        display: flex;
        align-items: center;
        .navItem {
          text-align: center;
          color: $text-color;
          cursor: pointer;
          font-size: 19px;
          font-weight: 600;
          margin-right: 50px;
          box-sizing: border-box;
          position: relative;
  
          &:hover {
            color: $primary-color;
          }
          .active {
            position: absolute;
            left: 5%;
            bottom: -10px;
            width: 90%;
            height: 4px;
            border-radius: 10px;
            background: $primary-color;
          }
          .navName {
            color: $text-color;
            font-size: 19px;
            font-weight: 600;
          }
        }
        
      }
      .headerRgt {
        width: 300px;
        display: flex;
        align-items: center;
  
        .headerInput ::v-deep .el-select .el-input {
          width: 105px;
        }
        .headerInput ::v-deep .el-input-group__prepend {
          background-color: #fff;
        }
        .headerInput ::v-deep .el-input-group__append {
          background-color: #fff;
        }
        .headerInput ::v-deep .el-input__inner {
          border-right: none;
        }
        .headerInput ::v-deep .el-input__inner:focus {
          border-color: #c6c6c6;
        }
      }
      .loginOut {
        width: 60px;
        height: 70px;
        cursor: pointer;
        text-align: center;
        padding-top: 14px;
        box-sizing: border-box;
        color: $text-color;
        img {
          width: 30px;
          height: 30px;
        }
        .userHead {
          padding: 4px;
          box-sizing: border-box;
          // border-radius: 50%;
        }
        div {
          font-size: 14px;
        }
      }
      .user_box_wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .backHome {
          color: #fff;
          margin-right: 30px;
          cursor: pointer;
        }
      }
      .user_box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        .user_img {
          width: 36px;
          height: 36px;
          margin-right: 10px;
          .icon {
            width: 100%;
            height: 100%;
          }
        }
      }
      .loginBtn {
        color: #fff;
        padding: 8px 20px;
      }
      .registerBtn {
        background: #fff;
        padding: 8px 20px;
        color: $primary-color;
        border-radius: 6px;
      }
    }
  }
  .headerTop {
    background: #0B81FE;
  }
}
.dropdown-icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
</style>
